<template>
    <el-select :disabled="loading" @change="onChange" :value="selected">
        <el-option v-for="item in list" :key="item.id" :label="item.name" :value="item.id" />
    </el-select>
</template>

<script>
import reques from '@/utils/request.js'
export default{
    model:{
        prop:'value',
        event:'modelChange'
    },
    props:{
        value:{
            type:String | Number,
            required:true,
        },
        url:{
            type:String,
            required:true
        }
    },
    data(){
        return {
            selected:this.value,
            list:[],
            loading:true
        }
    },
    mounted(){
        this.load()
    },
    methods:{
        async load(){
            this.loading = true
            this.list = await reques.get(this.url)
            this.loading = false
        },
        onChange(e){
            this.selected = e
            this.$emit('modelChange',e)
            this.$emit('change',this.list.find(x=>x.id == e))
        }
    }
}
</script>